.btn-svg2{
  position: relative;
  height: 50px;
  display: inline-block;
  width: 165px;
  overflow: hidden;
  margin: 3px;
}


.btn-svg2 .btn-text{
    margin: 0px auto;
    position: absolute;
    right: 0px;
    left: 0px;
    display: inline-block;
    width: 163px;
    top: 50%;
    margin-top: -10px;
}



.btn-svg2 svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: inline-block;
   
}

.btn-svg2 svg rect {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 6;
  stroke-dasharray: 422, 0;
  stroke-dashoffset: 0;
  -webkit-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-svg2:hover svg rect {
  stroke-width: 10;
  stroke-dasharray: 110, 312;
  stroke-dashoffset: 183;
}





.svg-4{
  display: inline-block;
}

.svg-4 .btn {
  font-size: 1em;
  line-height: 1em;
  letter-spacing: 0.04em;
  display: inline-block;
}
.svg-4 .btn-svg {
  position: relative;
  height: 42px;
  width: 151px;
  overflow: hidden;
  border-radius: 21px;
  margin: 6px;
}
.svg-4 .btn-svg:hover .btn-svg-circle circle {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.svg-4 .btn-svg:hover .btn-svg-label {
  color: #fff;
}
.svg-4 .btn-svg:hover .btn-svg-border-left path,
.svg-4 .btn-svg:hover .btn-svg-border-right path {
  stroke-dasharray: 61.8204345703125 61.8204345703125;
  stroke-dashoffset: 0;
  -webkit-transition-delay: 0.25s;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-property: stroke-dashoffset;
  -moz-transition-delay: 0.25s;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-property: stroke-dashoffset;
  -ms-transition-delay: 0.25s;
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: ease-in-out;
  -ms-transition-property: stroke-dashoffset;
  transition-delay: 0.25s;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-property: stroke-dashoffset;
}
.svg-4 .btn-svg-label {
  -webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: black;
  z-index: 3;
  width: 100%;
  -webkit-transition: color 0.5s ease-in-out;
  transition: color 0.5s ease-in-out;
}
.svg-4 .btn-svg-circle circle {
  -webkit-transition: transform 0.5s ease-in-out;
  -webkit-transform: scale(1.1);
  -webkit-transform-origin: 50% 50%;
  -moz-transition: transform 0.5s ease-in-out;
  -moz-transform: scale(1.1);
  -moz-transform-origin: 50% 50%;
  -ms-transition: transform 0.5s ease-in-out;
  -ms-transform: scale(1.1);
  -ms-transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transform: scale(1.1);
  transform-origin: 50% 50%;
}
.svg-4 .btn-svg-border-left path, .btn-svg-border-right path {
  stroke-dasharray: 61.8204345703125 61.8204345703125;
  -webkit-transition-duration: 0s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-property: stroke-dashoffset;
  -webkit-transition-delay: 0.5s;
  -moz-transition-duration: 0s;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-property: stroke-dashoffset;
  -moz-transition-delay: 0.5s;
  -ms-transition-duration: 0s;
  -ms-transition-timing-function: ease-in-out;
  -ms-transition-property: stroke-dashoffset;
  -ms-transition-delay: 0.5s;
  transition-duration: 0s;
  transition-timing-function: ease-in-out;
  transition-property: stroke-dashoffset;
  transition-delay: 0.5s;
}
.svg-4 .btn-svg-border-left path {
  stroke-dashoffset: -61.8204345703125;
}
.svg-4 .btn-svg-border-right path {
  stroke-dashoffset: 61.8204345703125;
}
.svg-4 .btn-svg svg, .btn-svg-label {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -moz-transform: translate(-50%, -50%);
  -moz-transform-origin: 50% 50%;
  -ms-transform: translate(-50%, -50%);
  -ms-transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.svg-4 .c-white {
  color: white;
}

.svg-4 .trailer {
  margin-bottom: 40px;
}
.svg-4 .trailer-nano {
  margin-bottom: 10px;
}

.svg-4 a {
  position: relative;
  text-decoration: none;
  color: red;
}
.svg-4 a:after {
  content: '';
  height: 1px;
  bottom: -4px;
  position: absolute;
  left: 5%;
  right: 95%;
  background: red;
  -webkit-transition: right 0.25s ease-in-out;
  transition: right 0.25s ease-in-out;
}
.svg-4 a:hover:after {
  right: 5%;
}


.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  height: 50px;
  display: inline-block;
  margin: 6px;
}


/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
 stroke-width: 6px;
 fill: transparent;
 stroke: rgba(10, 9, 9, 0.1);
 stroke-dasharray: 80 394;
 stroke-dashoffset: -234;
 transition: 1s all ease;
}


/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

.svg-wrapper #text {
  position: absolute;
  right: 0px;
  left: 0px;
  top: 50%;
  margin-top: -11px;
 
  
}

.svg-wrapper #text a{
  color: #eaeaea;  text-decoration: none;
}

.svg-wrapper #text a{

}



.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 5px;
  stroke-dashoffset: 0;
  stroke: rgba(0, 0, 0, 0.1);
  color: #fff;

}


.btn-default.svg-wrapper:hover #text a,
.btn-primary.svg-wrapper:hover #text a,
.btn-success.svg-wrapper:hover #text a,
.btn-info.svg-wrapper:hover #text a,
.btn-danger.svg-wrapper:hover #text a,
.btn-warning.svg-wrapper:hover #text a
{
  color: #fff;
}

.btn-default.btn-svg2 svg rect,
.btn-default.svg-wrapper #shape,
{
  stroke: #e2e8f1;
}

.btn-default.btn-svg2:hover svg rect,
.btn-default.svg-wrapper:hover #shape{
  stroke: #d6dbe2;
}

.btn-primary.btn-svg2 svg rect,
.btn-primary.svg-wrapper #shape,
{
  stroke: #5e60c7;
}

.btn-primary.btn-svg2:hover svg rect,
.btn-primary.svg-wrapper:hover #shape{
  stroke: #42438c;
}

.btn-success.btn-svg2 svg rect,
.btn-success.svg-wrapper #shape,
{
  stroke: #326d32;
}

.btn-success.btn-svg2:hover svg rect,
.btn-success.svg-wrapper:hover #shape{
  stroke: #326d32;
}

.btn-info.btn-svg2 svg rect,
.btn-info.svg-wrapper #shape,
{
  stroke: #2894b3;
}

.btn-info.btn-svg2:hover svg rect,
.btn-info.svg-wrapper:hover #shape{
  stroke: #2894b3;
}

.btn-danger.btn-svg2 svg rect,
.btn-danger.svg-wrapper #shape,
{
  stroke: #b5130f;
}

.btn-danger.btn-svg2:hover svg rect,
.btn-danger.svg-wrapper:hover #shape{
  stroke: #b5130f;
}

.btn-warning.btn-svg2 svg rect,
.btn-warning.svg-wrapper #shape,
{
  stroke: #bd7918;
}

.btn-warning.btn-svg2:hover svg rect,
.btn-warning.svg-wrapper:hover #shape{
  stroke: #bd7918;
}